.conversations{
  background-color: hsl(var(--background));
  .conversation-item.active{
    background-color: hsl(var(--accent));
  }
  .conversation-item:hover{
    background-color: hsl(var(--accent));
  }
  .conversation-content .conversation-label{
    color: hsl(var(--foreground)) !important;
  }
  .conversation-group .conversation-group-title{
    background-color: hsl(var(--background-deep));
    color: hsl(var(--foreground)) !important;
  }
}

.chat-box{
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  justify-content: center;
  overflow-x: hidden;
  .chat-content{
    flex: 1;
    overflow:hidden;
    width: 100%;
    background-color: hsl(var(--background));
    padding: 10px;
    border-radius: 10px;
  }
  .chat-remark{
    height: 150px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    .hello{
      font-size: 24px;
      font-weight: 700;
    }
    .remark{
      font-size: 36px;
      font-weight: 900;
    }
  }
  .chat-apps{
    padding: 20px 0;
    width: 100%;
    .app-card{
      background-color: hsl(var(--background));
      height: 80px;
      padding: 10px;
      border-radius: 10px;
      font-size: 20px;
      font-weight: 500;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.chat-input{
  .chat-input-ins{
    background-color: hsl(var(--background));
    overflow: hidden;
    border-radius: 10px;
  }
}
.chat-tools{
  width: 50%;
}
/* CSS过渡效果 - 淡入淡出 */
.tools-enter-active, .tools-leave-active {
  transition: width 0.3s ease;
  overflow: hidden; /* 确保内容不会溢出 */
}
.tools-enter-from,
.tools-leave-to {
  width: 0;
}
.tools-enter-to,
.tools-leave-from {
  width: 50%;
}
/**/
/* 滚动进入动画 - 从上方进入 */
.chat-content-enter-active {
  animation: scrollIn .5s ease-out forwards;
  overflow: hidden;
}

/* 滚动离开动画 - 向上方离开 */
.chat-content-leave-active {
  animation: scrollOut 0s ease-in forwards;
  overflow: hidden;
}

/* 滚动进入动画关键帧 */
@keyframes scrollIn {
  from {
    transform: translateY(-100%); /* 从上方30px位置开始 */
    opacity: 0; /* 完全透明 */
  }
  to {
    transform: translateY(0); /* 滚动到原始位置 */
    opacity: 1; /* 完全不透明 */
  }
}

/* 滚动离开动画关键帧 */
@keyframes scrollOut {
  from {
    transform: translateY(0); /* 从原始位置开始 */
    opacity: 1; /* 完全不透明 */
  }
  to {
    transform: translateY(-100%); /* 滚动到上方30px位置 */
    opacity: 0; /* 完全透明 */
  }
}

.chat-remark-enter-active{
  animation: scrollIn 1s ease-out forwards;
  overflow: hidden;
}
.chat-remark-leave-active {
    animation: scrollOut 0s ease-out forwards;
    overflow: hidden;
}

.chat-panel{
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  .chat-panel-close{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
  }
}
.el-bubble-content{
  width: 100%;
}
